html,
body {
    height: 100%;
}
#box{
    height: 100%;
    display: flex;
    flex-direction: column;
}

#box header {
    width: 100%;
    height: 1.25rem;
    background-color: #dd403b;
}

#box header a{
    display: inline-block;
    margin-left: .46875rem;
    margin-right: 3.28125rem;
    color: white;
}

#box header h6 {
    display: inline-block;
    text-align: center;
    color: white;
    line-height: 1.25rem;
    font-size: .375rem;
}

/*电影详情*/
#box main{
    display: flex;
    flex: 1;
    flex-direction: column;
    background-color: #f6f6f6;
    overflow-y: scroll;
}
#box main .content{
    height: 10.3125rem;
    background-color: #446588;
}
#box main .content .details{
    height: 6.875rem;
    overflow: hidden;
}
/*图片和内容 */
#box main .content .details .top{
    height: 4.6875rem;
    display: flex;
    margin: .46875rem .46875rem;
}
#box main .content .details .top img{
    width: 3.4375rem;
    height: 4.6875rem;
    margin-right: .3125rem;
}
#box main .content .details .top div{
    height: 4.6875rem;
}
#box main .content .details .top div p {
    padding-bottom:.078125rem;
    color: #a8c3e0;
}
#box main .content .details .top div p:nth-child(1){
    color: white;
    font-size:.625rem;
    margin-bottom: .15625rem;
}
#box main .content .details .top div p:nth-child(2){
    color: #a18f5d;
    font-size: .546875rem;
    margin-bottom:.15625rem;
}
/* 想看和评论 */
#box main .content .details .buttom{
    height: 1rem;
    display: flex;
    justify-content: space-around;
}
#box main .content .details .buttom a{
    display: inline-block;
    width: 4.1875rem;
    height: .9375rem;
    text-align: center;
    line-height: .9375rem;
    background-color: #849ba9;
    border-radius: 10%;
}
/* 简介 */
#box main .content .brief{
    height: 3.4375rem;
    background-color: white;
    color: black;
}
#box main .content .brief span{
    display: inline-block;
    width: 9.2rem;
    height: 3rem;
    font-size: .4375rem;
    font-weight: bold;
    margin:.3125rem .46875rem;
    text-overflow: ellipsis;   
    overflow: hidden;
}
/* 演职人员 */
#box .actor {
    width: 100%;
    height: 6.875rem;
    margin-top: .15625rem;
    background-color: white;
}
#box .actor h6 {
    width: 100%;
    height: .625rem;
    line-height: .625rem;
    padding-left: .46875rem;
    font-size: .375rem;
}

#box .actor .actor-1 {
    width: 100%;
    height: 5.46875rem;
    display: flex;
    overflow-x: scroll;
    flex-direction: row;
}
#box .actor .actor-1 figure {
    width: 2.65625rem;
    height: 5.3125rem;
    margin-left: .46875rem;
    margin-top: .3125rem;
}

#box .actor .actor-1 figure img {
    width: 2.65625rem;
    height: 3.59375rem;
}

#box  .actor .actor-1 figure figcaption {
    width: 2.65625rem;
    height: 1.6rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

#box  .actor .actor-1  figure p {
    width: 2.65625rem;
    height: .46875rem;
    text-align: center;
    font-size: .15625rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 视频和剧照 */
#box main .video{
    height: 5.3125rem;
    background-color: white;
    margin-top: .3125rem;
}
#box main .video h6{
    font-size: .40625rem;
    padding: .3125rem 0 .3125rem .46875rem;
 }
 #box .video .video-1 {
    width: 100%;
    height: 3.125rem;
    display: flex;
    overflow-x: scroll;
    flex-direction: row;
    margin: 0 .46875rem;
}
#box .video .video-1 figure {
    width:  2.96875rem;
    height: 2.96875rem;
    margin-right: .234375rem;
    /* margin-top: .3125rem; */
    /* border: 1px solid red; */
}
#box .video .video-1 figure img{
    width:  2.96875rem;
    height: 2.96875rem;
}

/* 观众和评论 */
#box main .comment{
    /* height: 5.5625rem; */
    background-color: white;
    margin-top: .3125rem;
}
#box main .comment p{
    font-size: .40625rem;
    display: flex;
    justify-content: space-between;
    padding: .3125rem .46875rem;
}
#box main .comment p span:nth-of-type(2){
    display: inline-block;
    border: .015625rem solid #d8bdc2;
    padding: .15625rem;
    border-radius: 30%;
}
#box main .comment .comment-1{
    margin: .46875rem 0 0 .46875rem;
} 

#box main .comment .comment-1 figure{
    display: flex;
    height: .9375rem;
}

#box main .comment .comment-1 figure figcaption{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
#box main .comment .comment-1 figure i{
    color: #f0c61a;
}
#box main .comment .comment-1 span{
    display: block;
    font-size: .5rem;
    font-weight: bold;
    margin: .3125rem .3125rem .3125rem 1.40625rem ;
    overflow: hidden;
    text-overflow: ellipsis;
}
#box main .comment .comment-1 img{
    width: .9375rem;
    height: .9375rem;
    margin-right: .3125rem;
    border-radius: 50%;
}